<template>
	<view id="user-passowrd">
		<v-title>{{headerTitle}}</v-title>
		<header-back :headerTitle="headerTitle"></header-back>
		<view class="content-form" v-if="showType == 1 || showType == 2">
			<view class="apply-row">
				<view class="h6">{{ $lang('password.cellphoneNumber') }}</view>
				<view class="apply-in">
					<!-- <input type="text"  placeholder="请输入手机号码" placeholder-style="color:#CBCBCB;" /> -->
					<view class="apply-h2">{{memberInfo.mobile}}</view>
				</view>
			</view>
			<view class="" v-if="showType == 1">
				<view class="apply-row">
					<view class="h6">{{ $lang('password.originalLoginPassword') }}</view>
					<view class="apply-in">
						<input type="password" @input="handleSubmit()" v-model="loginForm.old_password"  :placeholder="$lang('password.ioriginalLoginPassword')" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>
				<view class="apply-row">
					<view class="h6">{{ $lang('password.newLoginPassword') }}</view>
					<view class="apply-in">
						<input type="password" @input="handleSubmit()" v-model="loginForm.new_password"  :placeholder="$lang('password.inewLoginPassword')" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>				
			</view>
			<view class="" v-if="showType == 2">
				<view class="apply-row">
					<view class="h6">{{ $lang('password.resetPaymentPassword') }}</view>
					<view class="apply-in">
						<input type="password" v-model="payForm.password" @input="handleSubmit()" maxlength="6"  :placeholder="$lang('password.pleaseEnterA6DigitPassword')" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>
				<view class="apply-row">
					<view class="h6">{{ $lang('password.repeatPaymentPassword') }}</view>
					<view class="apply-in">
						<input type="password" v-model="rePassword" @input="handleSubmit()" maxlength="6" :placeholder="$lang('password.irepeatPaymentPassword')" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>				
			</view>
			<view class="apply-row">
				<view class="h6">{{ $lang('password.dynamicVerificationCode') }}</view>
				<view class="apply-in">
					<input type="text" @input="handleSubmit()" v-model="phoneCode"  :placeholder="$lang('password.pleaseEnterVerificationCode')" placeholder-style="color:#CBCBCB;" />
					<!-- <view :class="['code-tips',isSend?'dis-tips':'']" @click.stop="sendCode()">{{codeMsg}}</view> -->
					<image :src="captcha.img" class="code-img" @click.stop="getCaptcha()" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 绑定手机号 -->
		<view class="content-form" v-if="showType == 3 || showType == 4">
			<view class="" v-if="showType ==3">
				<view class="apply-row">
					<view class="h6">{{ $lang('password.originalPhoneNumber') }}</view>
					<view class="apply-in">
						<!-- <input type="number"  placeholder="请输入原手机号" placeholder-style="color:#CBCBCB;" /> -->
						<view class="apply-h2">{{memberInfo.mobile}}</view>
					</view>
				</view>
				<view class="apply-row">
					<view class="h6">{{ $lang('password.newPhoneNumber') }}</view>
					<view class="apply-in">
						<view class="apply-item">
							<view class="row-num" @click="$refs.countryPopup.open()">
								<text>+ {{selectIndex}}</text>
								<image src="/static/icon/icon_down_01.png" class="down-l" mode=""></image>
							</view>
							<input type="number" @input="handleSubmit()" v-model="mobileForm.mobile" :placeholder="$lang('password.inewPhoneNumber')" placeholder-style="color:#CBCBCB;" />
						</view>
					</view>
				</view>				
			</view>
			<view class="" v-if="showType == 4">
				<!-- <view class="apply-row">
					<view class="h6">原电子邮箱</view>
					<view class="apply-in">
						<input type="text" v-model=""  placeholder="请输入原电子邮箱" placeholder-style="color:#CBCBCB;" />
					</view>
				</view> -->
				<view class="apply-row">
					<view class="h6">{{ $lang('password.newEmail') }}</view>
					<view class="apply-in">
						<input type="text" v-model="emailForm.email" :placeholder="$lang('password.inewEmail')" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">{{ $lang('password.dynamicVerificationCode') }}</view>
				<view class="apply-in">
					<input type="text" v-model="phoneCode" @input="handleSubmit()"  :placeholder="$lang('password.idynamicVerificationCode')" placeholder-style="color:#CBCBCB;" />
					<!-- <view :class="['code-tips',isSend?'dis-tips':'']" @click.stop="sendCode()">{{codeMsg}}</view> -->
					<image :src="captcha.img" class="code-img" @click.stop="getCaptcha()" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="content-ul" v-if="showType == 5" > 
			<view class="form-ul">
				<view class="form-li">
					<view class="h3">{{ $lang('password.chinese') }}</view>
					<image src="/static/icon/icon_select_01.png" class="sel-icon" mode=""></image>
				</view>
				<view class="form-li" @click="setLanguage()">
					<view class="h3">English</view>
					<!-- <image src="/static/icon/icon_select_01.png" class="sel-icon" mode=""></image> -->
				</view>
			</view>
		</view>
		
		
		<view class="content-footer" v-if="showType != 5">
			<view :class="['footer-btn',disabled?'btn-dis':'']"  @click="submitReal()">{{showType == 3 || showType == 4  ? $lang('password.rebind'): $lang('password.resetPassword')}}</view>
		</view>
		
		
		
		<!-- 区号弹框 -->
		<uni-popup ref="countryPopup" type="right" :mask-click="true">
			<view class="country-popup">
				<view class="shops-header-box">
					<view class="shops-header">
						<view class="shops-left" @click.stop="$refs.countryPopup.close()">
							<image  src="/static/icon/arrow_left_01.png" class="arrow-l" mode=""></image>
							<view class="shops-header-title">{{$lang('password.chooseAnAreaCode')}}</view>
						</view>
						<view class="shops-right" ></view>				
					</view>
					<view class="search-wrap uni-flex uni-row">
						<view class="flex-item input-wrap">
							<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="searchFn()" :placeholder="$lang('password.pleaseEnterCountryName')" />
							<text class="iconfont iconsousuo1" @click.stop="searchFn()"></text>
						</view>
					</view>
				</view>
				<view class="country-ul">
					<view class="country-li" v-for="(obj,l) in countryArr" :key="l" @click.stop="selectFn(obj,l)">
						<view class="li-name">
							<text >{{obj.name}} <text class="h6">+{{obj.tel}}</text></text>
							<image v-show="selectIndex == obj.tel" src="/static/icon/icon_select_01.png" class="sel-icon" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	data() {
		return {
			showType: 1,
			headerTitle: this.$lang('password.modifyLoginPassword'),
			disabled: true,
			codeMsg: this.$lang('password.getVerificationCode'),
			isSend: false,
			timeer: null,
			mins: 60,
			memberInfo: {},
			loginForm: {
				old_password: '',
				new_password: '',
				captcha_id: '',
				captcha_code: '',
			},
			phoneCode: '',
			payForm: {
				captcha_id: '',
				captcha_code: '',
				password: '',
			},
			rePassword: '',
			mobileForm: {
				mobile: '',
				captcha_code: '',
				captcha_id: '',
			},
			countryArr: [],
			selectIndex: '86',
			captcha: {
				// 验证码
				id: '',
				img: ''
			},
			emailForm: {
				email: '',
				captcha_code: '',
				captcha_id: '',
			},
			keyword: '',
			copyCountry: [],
		};
	},
	onLoad(e) {
		this.showType = e.type;
		this.headerTitle = e.title;
		this.getMemberInfo();
		this.getCountry();
		this.getCaptcha();
	},
	components: {
		headerBack,
		uniPopup
	},
	onShow() {

	},
	methods: {
		searchFn(){
			let keyword = this.keyword.trim();
			if(!keyword){
				this.countryArr = this.copyCountry;
			}
			this.countryArr = this.copyCountry.filter(v=>{
				if(v.name.includes(keyword) ){
					return v;
				} 
			})
		},
		/**
		 * 获取验证码
		 */
		getCaptcha() {
			this.$api.sendRequest({
				url: '/api/captcha/captcha',
				data: {
					captcha_id: this.captcha.id
				},
				success: res => {
					if (res.code >= 0) {
						this.captcha = res.data;
						this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
						if(this.showType == 1){
							this.loginForm.captcha_id = res.data.id;
						}else if(this.showType == 2){
							this.payForm.captcha_id = res.data.id
						}else if(this.showType == 3){
							this.mobileForm.captcha_id = res.data.id
						}else if(this.showType == 4){
							this.emailForm.captcha_id = res.data.id;
						}
					}
				}
			});
		},
		// 设置语言
		setLanguage(){
			this.$util.showToast({title: '功能开发中'})
		},
		// 获取区号
		getCountry(){
			this.$api.sendRequest({
				url: '/api/register/countrylist',
				method: 'get',
				success:res=>{
					if(res.code == 0){
						this.copyCountry = this.countryArr = res.data;
					}
				}
			})
		},
		// 选择区号
		selectFn(obj,index){
			this.selectIndex = obj.tel;
			this.$refs.countryPopup.close()
		},
		// 处理显示状态
		handleSubmit(){
			if(this.showType == 1){
				this.loginForm.captcha_code = this.phoneCode;
				this.disabled = !Object.values(this.loginForm).every(v=> v);
				// console.log(JSON.stringify(this.loginForm))
			}else if(this.showType == 2){
				this.payForm.captcha_code = this.phoneCode
				this.disabled = !Object.values(this.payForm).every(v=> v);
			}else if(this.showType == 3){
				this.mobileForm.captcha_code = this.phoneCode
				this.disabled = !Object.values(this.mobileForm).every(v=> v);
			}else if(this.showType == 4){
				this.emailForm.captcha_code = this.phoneCode
				this.disabled = !Object.values(this.emailForm).every(v=> v);
			}
		},
		// 获取会员基础信息
		async getMemberInfo() {
			let res = await this.$api.sendRequest({
				url: '/api/member/info',
				async: false
			});
			if (res.code >= 0 && res.data) {
				this.memberInfo = res.data;
			} 
		},
		// 发送验证码
		sendCode(){
			if(this.isSend) return;
			let mobile = this.showType == 3?this.mobileForm.mobile : this.memberInfo.mobile
			this.$api.sendRequest({
				url: '/api/member/paypwdcode',
				data: {
					mobile: mobile,
				},
				method: 'get',
				success: res=>{
					if(res.code == 0){
						this.$util.showToast({title: this.$lang('password.tip4')})
						// this.formObj.key = res.data.key;
						if(this.showType == 1){
							this.loginForm.key = res.data.key;
						}else if(this.showType == 2){
							this.payForm.key = res.data.key
						}else if(this.showType == 3){
							this.mobileForm.key = res.data.key
						}
						this.handleTime();
					}else {
						this.$util.showToast({title: res.message})
					}
				}
			})
		},
		// 倒计时
		handleTime(){
			this.isSend = true;
			this.codeMsg = this.$lang('password.rbefore')+`${this.mins}`+this.$lang('password.rafter')
			this.timeer = setInterval(()=>{
				if(this.mins == 0){
					this.codeMsg = this.$lang('password.tip3')
					this.isSend = false;
					this.mins = 60;
					clearInterval(this.timeer)
					return false;
				}
				this.mins--;
				this.codeMsg = this.$lang('password.before')+`${this.mins}`+this.$lang('password.after')
			},1000)
		},
		// 检验
		handleForm(){
			if(this.showType == 2){
				let regNumber = /^\+?[1-9][0-9]*$/; // 正整数
				if(!regNumber.test(this.payForm.password)){
					return this.$util.showToast({title:  this.$lang('password.tip2')})
				}
				if(this.rePassword != this.payForm.password){
					return this.$util.showToast({title: this.$lang('password.tip1')})
				}				
			}
			return true;
		},
		// 提交
		submitReal(){
			if(this.handleForm() !== true) return false;
			let url,data;
			if(this.showType == 1){
				url = '/api/member/modifypassword'
				data = this.loginForm;
			}else if(this.showType == 2){
				url = '/api/member/modifypaypassword'
				data = this.payForm;
			}else if(this.showType == 3){
				url =  '/api/member/modifymobile'
				data = this.mobileForm
			}else if(this.showType == 4){
				url = '/api/member/modifyemail'
				data = this.emailForm;
			}
			uni.showLoading({
				title: 'Loading...',
				mask: true
			})
			this.$api.sendRequest({
				url: url,
				data: data,
				method: 'post',
				success: res=>{
					if(res.code == 0){
						this.$util.showToast({title: this.$lang('password.successfullyModified')})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},1500)
					}else {
						this.getCaptcha();
						this.$util.showToast({title: res.message})
					}
				}
			})
		},
	}
};
</script>

<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.content-form {
		width: 100%;
		padding: 36rpx 32rpx;
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 20rpx;
		.apply-row {
			padding-top: 36rpx;
			.h6 {
				font-size: 24rpx;
				color: #92969E;
				line-height: 34rpx;
				margin-bottom: 22rpx;
			}
			.apply-in {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #EFEFEF;
				input {
					flex: 1;
					font-size: 30rpx;
					color: #1D1E22;
				}
				.apply-item {
					display: flex;
					align-items: center;
					.row-num {
						display: flex;
						align-items: center;
						text {
							font-size: 32rpx;
							font-weight: 600;
							color: #292929;
						}
						.down-l {
							width: 24rpx;
							height: 24rpx;
							display: block;
							margin: 0px 10rpx;
						}
					}
				}
				.code-tips {
					font-size: 32rpx;
					color: #31bb6d;
				}
				.dis-tips {
					color: #CCD0D8;
				}
				.code-img {
					height: 52rpx;
					width: 140rpx;
				}
			}
			
		}
		
		
		
	}
	
	.content-ul {
		.form-ul {
			width: 100%;
			background: #fff;
			padding: 0px 32rpx;
			box-sizing: border-box;
			.form-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 110rpx;
				border-bottom: 2rpx solid #E8EDF5;
				.h3 {
					font-size: 32rpx;
					font-weight: 400;
					color: #353535;
				}
				.sel-icon {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
	
	
	.content-footer {
		position: fixed;
		bottom: 74rpx;
		left: 0px;
		width: 100%;
		padding: 96rpx 54rpx 0px;
		box-sizing: border-box;
		.footer-btn {
			width: 100%;
			height: 76rpx;
			background: #31bb6d;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #fff;
		}
		.btn-dis {
			background: #CCD0D8;
		}
	}
	
	
	.country-popup {
		width: 100%;
		background: #F8F7FC;
		
		// height: auto;
		overflow: auto;
		.shops-header-box {
			width: 100%;
			// height: 88rpx;
			background: #fff;
			padding: 0px 32rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;
			.shops-header {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.shops-left {
					display: flex;
					align-items: center;
					.shops-header-title {
						font-size: 36rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #292929;
						line-height: 50rpx;
						margin-left: 6rpx;
					}
				}
				.shops-right {
					display: flex;
					align-items: center;
					.home-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
					.to-home {
						font-size: 26rpx;
						color: #31bb6d;
					}
				}
			}	
			
			.search-wrap {
				flex: 0.5;
				padding: 30rpx 30rpx;
				font-size: $font-size-tag;
				display: flex;
				align-items: center;
				.input-wrap {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: $color-bg;
					height: 70rpx;
					padding-left: 10rpx;
					border-radius: 70rpx;
					input {
						width: 90%;
						background: $color-bg;
						font-size: $font-size-tag;
						height: 50rpx;
						padding: 10rpx 25rpx 10rpx 40rpx;
						line-height: 50rpx;
						border-radius: 40rpx;
					}
					text {
						font-size: $font-size-toolbar;
						color: $color-tip;
						width: 80rpx;
						text-align: center;
						margin-right: 20rpx;
					}
				}
				
			}
			
		}
		.country-ul {
			height: 100vh;
			// padding-top: 100rpx;
			overflow: auto;
			.country-li {
				width: 100%;
				background: #fff;
				padding: 0px 32rpx;
				box-sizing: border-box;
				.li-name {
					width: 100%;
					height: 110rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #E8EDF5;
					text {
						font-size: 32rpx;
						color: #353535;
						.h6 {
							margin-left: 15rpx;
							color: #92969E;
						}
					}
					.sel-icon {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
	
	
</style>
